<!-- 选择房间号 -->
<template>
  <div class="selectRoom-container">
    <div class="main" v-if="props.RoomArr !== 0">
      <div
        class="box"
        v-for="item in props.RoomArr"
        :key="item.id"
        @click="transmit(item)"
      >
        <Box :colorArr="['#7817e7', '#ba3ae2']">
          <div class="content">
            <div class="icon">
              <Icon type="room"></Icon>
            </div>
            <p class="title">{{ item.roomNo }}</p>
              <p class="people">以住人数: {{ item.roomResided }}人</p>
              <p class="people">可住人数: {{ item.roomCapacity }}人</p>
          </div>
        </Box>
      </div>
    </div>
  </div>
</template>

<script setup>
import Box from "@/components/Box/index.vue";
import Icon from "@/components/Icon/index.vue";
const props = defineProps({
  RoomArr:{
    type:Array,
    default: []
  }
})

import { useCheckInStore } from "@/store/useCheckInStore.js";
const emit = defineEmits(["closeMasking"]);
const store = useCheckInStore();
const { setRoom } = store;
// 选中的房间
function transmit(item) {
  if(item.roomResided >= item.roomCapacity){
    ElMessage.error('该房间已满，请换个房间居住')
    return
  }
  setRoom(item);
  emit("closeMasking");
}
</script>

<style lang="less" scoped>
@import "./styles/Select.less";
.selectRoom-container {
  width: 100%;
  height: 100%;
  .select();
}
</style>